<template>
  <Tabs :value="name" type="card" @on-click="changeType">
    <TabPane label="惠民资金" name="1">
      <div class="container">
        <Alert>
          <Form :model="searchObj" inline>
            <FormItem>
              <Input
                v-model="searchObj.project_name"
                class="search-input"
                clearable
                style="width: 180px"
                placeholder="请输入项目名称"
              />
            </FormItem>
            <FormItem>
              <Select
                v-model="searchObj.natures"
                clearable
                style="width: 180px"
                placeholder="请选择政策直达性质"
              >
                <Option value="可实现政策直达">可实现政策直达</Option>
                <Option value="需调整后实现政策直达"
                  >需调整后实现政策直达</Option
                >
                <Option value="暂时无法实现政策直达"
                  >暂时无法实现政策直达</Option
                >
              </Select>
            </FormItem>
            <!--            <FormItem>-->
            <!--              <Select-->
            <!--                  clearable-->
            <!--                  v-model="searchObj.project_type"-->
            <!--                  style="width: 200px"-->
            <!--              >-->
            <!--                <Option value="1">补贴类</Option>-->
            <!--                <Option value="2">建设类</Option>-->
            <!--                <Option value="3">购买商品和服务类</Option>-->
            <!--                <Option value="99">其他</Option>-->
            <!--              </Select>-->
            <!--            </FormItem>-->
            <FormItem>
              <Button class="search-btn" type="primary" @click="searchAction">
                <Icon type="ios-search" />
                搜索
              </Button>
            </FormItem>
            <FormItem>
              <Button class="search-btn" type="success" @click="addAction">
                <Icon type="md-add" />
                添加
              </Button>
            </FormItem>
            <FormItem>
              <Button
                type="warning"
                icon="ios-cloud-download"
                @click="exportData"
                class="seach-btn"
                >导出</Button
              >
            </FormItem>
          </Form>
        </Alert>
        <Row>
          <vxe-toolbar custom></vxe-toolbar>
          <vxe-table
            border
            resizable
            export-config
            :tooltip-config="{
              theme: 'light',
              enterable: true,
              enabled: false,
            }"
            highlight-hover-row
            size="medium"
            :loading="tableLoading"
            align="center"
            header-align="center"
            :sort-config="{ trigger: 'cell' }"
            :data="tableData"
            :checkbox-config="{ checkField: 'checked' }"
          >
            <vxe-table-column
              type="seq"
              title="序号"
              width="60"
            ></vxe-table-column>
            <vxe-table-column
              width="260"
              field="project_name"
              title="项目资金名称"
            ></vxe-table-column>
            <!--            <vxe-table-column width="180" field="project_type" title="项目类型">-->
            <!--              <template v-slot="{ row }">-->
            <!--                <span v-if="row.project_type == '1'">补贴类</span>-->
            <!--                <span v-if="row.project_type == '2'">建设类</span>-->
            <!--                <span v-if="row.project_type == '3'">购买商品和服务类</span>-->
            <!--                <span v-if="row.project_type == '99'">其他</span>-->
            <!--              </template>-->
            <!--            </vxe-table-column>-->
            <vxe-table-column
              width="140"
              field="budget"
              title="资金额度（万元）"
            ></vxe-table-column>
            <vxe-table-column
              width="180"
              field="capital_source"
              title="资金来源"
            ></vxe-table-column>
            <!--            <vxe-table-column-->
            <!--                width="180"-->
            <!--                field="project_cycle"-->
            <!--                title="项目周期"-->
            <!--            ></vxe-table-column>-->
            <vxe-table-column
              width="200"
              field="natures"
              title="直达性质"
            ></vxe-table-column>
            <vxe-table-column width="180" field="fill_state" title="完成状态">
              <template v-slot="{ row }">
                <span v-if="row.fill_state == '0'">草稿</span>
                <span v-if="row.fill_state == '1'">已完成</span>
              </template>
            </vxe-table-column>
            <vxe-table-column
              width="200"
              field="office_name"
              title="填报部门"
            ></vxe-table-column>
            <vxe-table-column
              width="180"
              field="create_time"
              title="创建时间"
            ></vxe-table-column>
            <vxe-table-column
              width="280"
              fixed="right"
              field="action"
              title="操作"
            >
              <template v-slot="{ row }">
                <!-- <Button
                  v-if="row.fill_state != '1' && row.create_by === userId"
                  type="primary"
                  size="small"
                  class="action-btn"
                  @click="optionAction(row, 'edit')"
                  >编辑</Button
                > -->
                <Button
                  v-if="row.create_by === userId && row.fill_state != '1'"
                  type="primary"
                  size="small"
                  class="warning-btn"
                  @click="optionAction(row, 'editCreate')"
                  >编辑</Button
                >
                <Button
                  type="info"
                  size="small"
                  class="action-btn"
                  @click="optionAction(row, 'info')"
                  >详情</Button
                >
                <Button
                  v-if="row.create_by === userId"
                  type="error"
                  size="small"
                  class="action-btn"
                  @click="optionAction(row, 'delete')"
                  >删除</Button
                >
                <!-- ---切换隐藏显示---------- -->
                <!-- <Button
                  type="warning"
                  size="small"
                  class="warning-btn"
                  @click="optionAction(row, 'create')"
                  v-if="row.create_by === userId && row.fill_state == '0'"
                  >事项管理</Button
                > -->
                <!-- v-if="row.fill_state != '1' && row.create_by === userId" -->

                <!-- ------------------------------- -->
                <Button
                  v-if="row.create_by === userId && row.fill_state == '0'"
                  type="success"
                  size="small"
                  class="action-btn"
                  @click="finishState(row)"
                  >确认提交</Button
                >
                <!--                <Button-->
                <!--                    v-if="row.create_by === userId && row.fill_state == '1'"-->
                <!--                    type="warning"-->
                <!--                    size="small"-->
                <!--                    class="action-btn"-->
                <!--                    @click="cancelState(row)"-->
                <!--                >取消提交</Button-->
                <!--                >-->
              </template>
            </vxe-table-column>
          </vxe-table>
        </Row>
        <br />
        <Row type="flex" justify="end">
          <Page
            :total="pageObj.totalRecord"
            show-total
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="pageChangeS"
          />
        </Row>
        <details-option ref="detailOption" :dataObj="dataList"></details-option>
      </div>
    </TabPane>
    <TabPane label="惠企资金" name="2">
      <div class="container">
        <Alert>
          <Form :model="searchObj" inline>
            <FormItem>
              <Input
                v-model="searchObj.project_name"
                class="search-input"
                clearable
                style="width: 180px"
                placeholder="请输入项目名称"
              />
            </FormItem>
            <FormItem>
              <Select
                v-model="searchObj.natures"
                clearable
                style="width: 180px"
                placeholder="请选择政策直达性质"
              >
                <Option value="可实现政策直达">可实现政策直达</Option>
                <Option value="需调整后实现政策直达"
                  >需调整后实现政策直达</Option
                >
                <Option value="暂时无法实现政策直达"
                  >暂时无法实现政策直达</Option
                >
              </Select>
            </FormItem>
            <!--            <FormItem>-->
            <!--              <Select-->
            <!--                  clearable-->
            <!--                  v-model="searchObj.project_type"-->
            <!--                  style="width: 200px"-->
            <!--              >-->
            <!--                <Option value="1">补贴类</Option>-->
            <!--                <Option value="2">建设类</Option>-->
            <!--                <Option value="3">购买商品和服务类</Option>-->
            <!--                <Option value="99">其他</Option>-->
            <!--              </Select>-->
            <!--            </FormItem>-->
            <FormItem>
              <Button class="search-btn" type="primary" @click="searchAction">
                <Icon type="ios-search" />
                搜索
              </Button>
            </FormItem>
            <FormItem>
              <Button class="search-btn" type="success" @click="addAction">
                <Icon type="md-add" />
                添加
              </Button>
            </FormItem>
            <FormItem>
              <Button
                type="warning"
                icon="ios-cloud-download"
                @click="exportData"
                class="seach-btn"
                >导出</Button
              >
            </FormItem>
          </Form>
        </Alert>
        <Row>
          <vxe-toolbar custom></vxe-toolbar>
          <vxe-table
            border
            resizable
            export-config
            :tooltip-config="{
              theme: 'light',
              enterable: true,
              enabled: false,
            }"
            highlight-hover-row
            size="medium"
            :loading="tableLoading"
            align="center"
            header-align="center"
            :sort-config="{ trigger: 'cell' }"
            :data="tableData"
            :checkbox-config="{ checkField: 'checked' }"
          >
            <vxe-table-column
              type="seq"
              title="序号"
              width="60"
            ></vxe-table-column>
            <vxe-table-column
              width="260"
              field="project_name"
              title="项目资金名称"
            ></vxe-table-column>
            <!--            <vxe-table-column width="180" field="project_type" title="项目类型">-->
            <!--              <template v-slot="{ row }">-->
            <!--                <span v-if="row.project_type == '1'">补贴类</span>-->
            <!--                <span v-if="row.project_type == '2'">建设类</span>-->
            <!--                <span v-if="row.project_type == '3'">购买商品和服务类</span>-->
            <!--                <span v-if="row.project_type == '99'">其他</span>-->
            <!--              </template>-->
            <!--            </vxe-table-column>-->
            <vxe-table-column
              width="140"
              field="budget"
              title="资金额度（万元）"
            ></vxe-table-column>
            <vxe-table-column
              width="180"
              field="capital_source"
              title="资金来源"
            ></vxe-table-column>
            <!--            <vxe-table-column-->
            <!--                width="180"-->
            <!--                field="project_cycle"-->
            <!--                title="项目周期"-->
            <!--            ></vxe-table-column>-->
            <vxe-table-column
              width="200"
              field="natures"
              title="直达性质"
            ></vxe-table-column>
            <vxe-table-column width="180" field="fill_state" title="完成状态">
              <template v-slot="{ row }">
                <span v-if="row.fill_state == '0'">草稿</span>
                <span v-if="row.fill_state == '1'">已完成</span>
              </template>
            </vxe-table-column>
            <vxe-table-column
              width="200"
              field="office_name"
              title="填报部门"
            ></vxe-table-column>
            <vxe-table-column
              width="180"
              field="create_time"
              title="创建时间"
            ></vxe-table-column>
            <vxe-table-column
              width="280"
              fixed="right"
              field="action"
              title="操作"
            >
              <template v-slot="{ row }">
                <!-- <Button
                  v-if="row.fill_state != '1' && row.create_by === userId"
                  type="primary"
                  size="small"
                  class="action-btn"
                  @click="optionAction(row, 'edit')"
                  >编辑</Button
                > -->
                <Button
                  v-if="row.create_by === userId && row.fill_state != '1'"
                  type="primary"
                  size="small"
                  class="warning-btn"
                  @click="optionAction(row, 'editCreate')"
                  >编辑</Button
                >
                <Button
                  type="info"
                  size="small"
                  class="action-btn"
                  @click="optionAction(row, 'info')"
                  >详情</Button
                >
                <Button
                  v-if="row.create_by === userId"
                  type="error"
                  size="small"
                  class="action-btn"
                  @click="optionAction(row, 'delete')"
                  >删除</Button
                >
                <!-- ---切换隐藏显示---------- -->
                <!-- <Button
                  type="warning"
                  size="small"
                  class="warning-btn"
                  @click="optionAction(row, 'create')"
                  v-if="row.create_by === userId && row.fill_state == '0'"
                  >事项管理</Button
                > -->
                <!-- v-if="row.fill_state != '1' && row.create_by === userId" -->

                <!-- ------------------------------- -->
                <Button
                  v-if="row.create_by === userId && row.fill_state == '0'"
                  type="success"
                  size="small"
                  class="action-btn"
                  @click="finishState(row)"
                  >确认提交</Button
                >
                <!--                <Button-->
                <!--                    v-if="row.create_by === userId && row.fill_state == '1'"-->
                <!--                    type="warning"-->
                <!--                    size="small"-->
                <!--                    class="action-btn"-->
                <!--                    @click="cancelState(row)"-->
                <!--                >取消提交</Button-->
                <!--                >-->
              </template>
            </vxe-table-column>
          </vxe-table>
        </Row>
        <br />
        <Row type="flex" justify="end">
          <Page
            :total="pageObj.totalRecord"
            show-total
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="pageChangeS"
          />
        </Row>
        <details-option ref="detailOption" :dataObj="dataList"></details-option>
      </div>
    </TabPane>
  </Tabs>
</template>

<script>
import {
  selectByPage,
  projectDelete,
  updateFillState,
  sstSalaryAnnualProjectFundNewSExport
} from '@/api/setting/private'
import DetailsOption from './components/details-option/index'
export default {
  components: { DetailsOption },
  data () {
    return {
      userId: '',
      searchObj: {},
      modalShow: false,
      btnLoading: false,
      formItem: {},
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      dataList: {},
      isCheck: false,
      zjtype: '1',
      sts: '',
      name: '1'
    }
  },
  mounted () {
    if (this.$route.query.sts) {
      this.sts = this.$route.query.sts
      if (this.sts === '1') {
        this.name = '1'
      }
      if (this.sts === '2') {
        this.name = '2'
      }
      this.init(this.sts)
    } else {
      this.sts = '1'
      this.name = '1'
      this.init(this.sts)
    }
  },
  methods: {
    // 数据导出
    exportData () {
      this.$Modal.confirm({
        title: '列表导出',
        content: '请您确认是否导出列表？',
        loading: true,
        onOk: () => {
          let param = {
            project_name: this.$common.xeUtils.trim(
              this.searchObj.project_name
            ),
            project_type: this.searchObj.project_type,
            natures: this.searchObj.natures,
            type: this.zjtype
          }
          sstSalaryAnnualProjectFundNewSExport(param).then((ret) => {
            let data = ret.data
            if (data.errcode === 0) {
              window.location.href = data.data.url
              setTimeout(() => {
                this.$Modal.remove()
                this.success('导出成功')
              }, 2000)
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    addAction () {
      this.$router.push({
        name: 'privateEnterprise',
        query: {
          zjtype: this.zjtype
        }
      })
    },
    init (val) {
      // console.log(val, '初始化方法')
      this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      let param = {
        project_name: this.searchObj.project_name,
        project_type: this.searchObj.project_type,
        natures: this.searchObj.natures,
        type: val,
        pageSize: this.pageObj.pageSize,
        pageNo: this.pageObj.pageNo
      }
      selectByPage(param).then((ret) => {
        // console.log(ret, '初始话数据')
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(
              item.create_time
            )
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
          this.zjtype =val
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    optionAction (val, type) {
      // console.log("得到的数据：", val);
      // localStorage.setItem("val",JSON.stringify(val))
      switch (type) {
        case 'edit':
          this.$router.push({
            name: 'privateEnterprise',
            query: { id: val.id }
          })
          break
        case 'info':
          this.$router.push({
            name: 'privateInfo',
            query: { id: val.id }
          })
          break
        case 'delete':
          this.deleteOption(val.id)
          break
        // case "create":
        //   //  localStorage.setItem("row",JSON.stringify(val))
        //   this.isCheck = true;
        //   this.$router.push({
        //     name: "createMoney",
        //     query: { id: val.id, vtype: "1", project_name: val.project_name },
        //   });
        //   break;
        case 'editCreate':
          this.$router.push({
            name: 'privateCreateList',
            query: { id: val.id, vtype: '2', project_name: val.project_name }
          })

          break
      }
    },
    // viewOption (row) {
    //   this.dataList = this.$common.xeUtils.clone(row)
    //   this.$refs.detailOption.modalAction()
    // },
    deleteOption (param) {
      this.$Modal.confirm({
        title: '确认删除？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          projectDelete({ id: param }).then((ret) => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init(this.zjtype)
              this.success('删除成功')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    finishState (row) {
      this.$Modal.confirm({
        title: '确认提交？',
        loading: true,
        onOk: () => {
          let param = {
            id: row.id,
            fill_state: '1'
          }
          updateFillState(param).then((ret) => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init(this.zjtype)
              this.success('已完成')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    cancelState (row) {
      this.$Modal.confirm({
        title: '确认取消提交？',
        loading: true,
        onOk: () => {
          let param = {
            id: row.id,
            fill_state: '0'
          }
          updateFillState(param).then((ret) => {
            let data = ret.data
            if (data.errcode === 0) {
              this.$Modal.remove()
              this.init(this.zjtype)
              this.success('已完成')
            } else {
              this.$Modal.remove()
              this.error(data)
            }
          })
        }
      })
    },
    searchAction () {
      // console.log(this.zjtype, this.name, '搜索中值')
      this.init(this.name)
    },

    pageChange (current) {
      // console.log(current, '6668')
      this.pageObj.pageNo = current
      this.init(this.zjtype)
      /* this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      let param = {
        project_name: this.searchObj.project_name,
        project_type: this.searchObj.project_type,
        pageNo: current,
        type: this.zjtype
      }
      selectByPage(param).then((ret) => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(
              item.create_time
            )
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      }) */
    },
    pageChangeS (val) {
      // console.log(val, 'fenye')
      this.pageObj.pageSize = val
      this.init(this.zjtype)
      /* this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      let param = {
        pageSize: val,
        type: this.zjtype
      }
      selectByPage(param).then((ret) => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(
              item.create_time
            )
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      }) */
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    changeType (name) {
      this.searchObj={}
      this.zjtype = name
      // console.log(name, 'tab页改变方法')
      /* // console.log(name, 'val!!!!')
      // 
      // console.log(this.zjtype, '民企直达')
      this.userId = this.$store.state.user.severUserInfo.data.id
      this.tableLoading = true
      let param = {
        project_name: this.searchObj.project_name,
        project_type: this.searchObj.project_type,
        type: this.zjtype
      }
      selectByPage(param).then((ret) => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.tableData.forEach((item) => {
            item.create_time = this.$common.xeUtils.toDateString(
              item.create_time
            )
          })
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.tableLoading = false
          this.error(data)
        }
      }) */
      this.name = name
    }
  },
  watch: {
    name () {
      // console.log('监听方法')
      this.searchObj = {}
      this.pageObj = {}
      this.init(this.name)
    }
  }
}
</script>

<style scoped lang="less">
.container {
  margin-bottom: 50px;
}

.container /deep/ .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px !important;
}

.action-btn,
.warning-btn {
  margin-right: 5px;
  margin-bottom: 3px;
}
</style>
